<html xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8">
    <title>SQL-Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        #editor {
            width: 100%;
            height: 350px;
        }
        .hidden {
            display: none;
        }
        pre {
            font-size: 26px;
            font-family: Consolas;
            font-weight: bolder;
        }
        .next-pre:hover{
            background: #0d5a13;
            color: white;
            text-decoration: none;
        }
    </style>


</head>
<body style="background:#818080;   ">
<!--<div style="position: fixed; top:0; border: 1px solid red;  background:#abb9a2; width: 100%; height: 50px;z-index: 9999; ">-->
<!--    <button onclick="change_part()" style="width: 50%; height: 100%; font-size: 32px; float: left;  ">pat_1</button>-->
<!--    <button onclick="change_part()" style="width: 50%; height: 100%; font-size: 32px; float: left;   ">pat_2</button>-->
<!--</div>-->
<!--<img th:src="@{/img/aaa.jpg}" style="width:123px; height:123px;  "/>-->



<div style="display: flex; ">
    <h1> get_by_id.html </h1>
    <h2><a href="/">首页</a></h2>
</div>

<h1 th:text="${SQLSyntaxErrorException}" style="color: orange;"></h1>
<div id="part_1" style="padding: 16px;  ">
    <div style="font-size: 32px; ">
        <span th:text="${result_null}"></span>
    </div>


    <div style="font-size: 32px; ">
        <span th:text="${result_null}"></span>
    </div>


    <style>
        table {
            border-collapse: collapse;
        }

        td, th {
            border: 3px solid red;
            padding: 5px;
        }
    </style>
    <table border="1" bgcolor="#f0ffff">
        <thead style="font-size: 16px">
        <tr>
            <!--    <th  th:text="${field.key}"  > </th>-->
            <!--    <th   th:text="${item}"  >asdasdad</th>-->
            <th th:each="item, iterStat : ${column}">
                <h1 th:text="${item}"></h1>
            </th>
        </tr>
        </thead>
        <tbody th:each="item : ${results}">
        <tr>
            <td th:each="valueee : ${item}">
                <h2 th:text="${valueee}"></h2>
            </td>

            <!--        <td th:each="col : ${item}">-->
            <!--        </td>-->
        </tr>
        </tbody>
    </table>


    <!--
    `id`  `title`  `page_url`  `level`  `img_urls`    `describe`  `sql`  `answer`
    -->

    <div th:each="item, iterStat : ${tb_sql_test_dto}" style="">
        <div style="  font-weight: bolder;     ">
            <div style="display: flex;   font-size: 32px;  justify-content: space-around; ">
                <h5> 全部测试表 </h5>
                <h5 id="all_tables"></h5>
            </div>
            <!--                         编辑器区域                            -->
            <div id="editor"></div>
            <!--                         编辑器区域                            -->
            <div style="  font-size: 32px; ">
                <span th:text="${item.title}"></span>
                <a th:href="${item.page_url}" target="_blank">查看原帖</a>
            </div>
            <pre th:text="${item.describe}"></pre>
            <div style="display: flex; ">
                <h2><a th:href="@{'/id/test?id='+ (${item.id}-1) + '&sql=c2hvdyBkYXRhYmFzZXM7'} " class="next-pre">上一页</a></h2>
                - <h2>id = </h2>
                <h2 th:text="${item.id}" id="id"></h2> -
                <h2><a th:href="@{'/id/test?id='+ (${item.id}+1) + '&sql=c2hvdyBkYXRhYmFzZXM7'} " class="next-pre">下一页</a></h2>
                <div style="width: 120px;"></div>
                <h2>难度 = </h2>
                <h2 th:text="${item.level}"></h2>
            </div>
            <div th:each="item, iterStat : ${item.img_url_list}">
                <img th:src="${item}" alt="" style="width: 100%;">
            </div>
        </div>

        <input type="text"   id="describe_input"   style="font-size: 24px; ">
        <button onclick="update_sql_answer('describe')"  style="float: right;">update_describe</button>

        <style>
            textarea {
                width: 98%;
                font-size: 26px;
                height: 333px;
                font-weight: bolder;
                border: 5px #09b41a solid;
                font-family: Consolas;
            }

            .update-btn {
                margin-top: 80px;
                font-size: 28px;
                background: #141be8;
                color: white;
                cursor: pointer;
            }

            .level_part button {
                font-size: 28px;
                font-weight: bolder;
                padding: 2px;
                margin-right: 120px;
                cursor: pointer;
            }
        </style>
        <!--        答案 : answer  -->
        <br><br>
        <p style="border-bottom: 1px solid green;  "></p>
        <div style="background:#f1f1ef; padding: 12px; border-radius: 10px;">
            <pre th:text="${item.answer}"></pre>
            <div style="width: 100%; height: 22px; "></div>
            <textarea id="test_answer_textarea" th:text="${item.answer}"></textarea>
            <button onclick="update_sql_answer('answer')" class="update-btn"> update_answer</button>
        </div>


        <!--           测试 SQL -->
        <br><br>
        <p style="border-bottom: 1px solid green;  "></p>
        <div style="background:#f1f1ef; padding: 12px; border-radius: 10px;">
            <pre th:text="${item.sql}"></pre>
            <div style="width: 100%; height: 22px; "></div>
            <textarea id="test_sql_textarea" th:text="${item.sql}"></textarea>
            <button onclick="update_sql_answer('sql')" class="update-btn"> UPDATE SQL</button>
        </div>
        <br><br><br><br><br><br>
        <div class="level_part">
            <h2>level : (0 没必要练习) _ (100简单) _ (200中等) _ (300难) _ (999最难最难的) </h2>
            <button onclick="update_level(0)">level = 0</button>
            <button onclick="update_level(100)">level = 100</button>
            <button onclick="update_level(200)">level = 200</button>
            <button onclick="update_level(300)">level = 300</button>
            <button onclick="update_level(999)">level = 999</button>
        </div>
        <script>
            function update_sql_answer(type) {
                console.log(type)
                let str = "";
                if (type === "sql") {
                    str = document.getElementById("test_sql_textarea").value
                }
                if (type === "answer") {
                    str = document.getElementById("test_answer_textarea").value
                }
                if (type === "describe") {
                    str = document.getElementById("describe_input").value
                }
                // return false;
                console.log(str)
                let url = "/update/ajax";
                let method = 'POST';
                // let method='GET';
                let postObj = {
                    id: document.getElementById("id").innerText,
                    strrr: str,
                    type: type,
                };
                let xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
                xhr.send(JSON.stringify(postObj));
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        if (xhr.responseText === 'success') {
                            alert("success");
                            location.reload();
                        } else {
                            alert("false")
                        }
                    }
                }
            }

            function update_level(level__) {
                console.log(level__);
                let url = "/update/level";
                let method = 'POST';
                // let method='GET';
                let postObj = {
                    id: document.getElementById("id").innerText,
                    level: level__
                };
                let xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
                xhr.send(JSON.stringify(postObj));
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        if (xhr.responseText === 'success') {
                            alert("success");
                            location.reload();
                        } else {
                            alert("false")
                        }
                    }
                }
            }
        </script>
        <script>
            let textareas = document.querySelectorAll("textarea")
            for (let i = 0; i < textareas.length; i++) {
                let aaa = textareas[i]
                aaa.addEventListener('input', (e) => {
                    aaa.style.height = '100px';
                    aaa.style.height = (e.target.scrollHeight + 20) + 'px';
                });
            }

            // var test_answer_textaraa = document.getElementById('test_answer_textarea');
            // var test_sql_textaraa = document.getElementById('test_sql_textarea');
            // textarea.addEventListener('input', (e) => {
            //     textarea.style.height = '100px';
            //     textarea.style.height = (e.target.scrollHeight + 20) + 'px';
            // });
        </script>

    </div>
</div>


<!--<div id="part_2" class="hidden">-->
<!--    <div th:each="item, iterStat : ${tb_sql_test_dto}" style="">-->
<!--        &lt;!&ndash;    image      &ndash;&gt;-->

<!--    </div>-->
<!--</div>-->


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>


<div th:each="item, iterStat : ${tb_sql_test_dto}" style="">
    <a th:href="@{'/delete/' + ${item.id}}" style="background:#f60f09; font-size: 20px;  color: white; padding: 3px;">delete this one </a>
</div>


<br><br><br>
<br><br><br>
<!--    <div th:each="field : ${item}">-->
<!--        <span th:text="${field.key}"></span> :-->
<!--    </div>-->

<!--

<div   th:each="item, iterStat : ${results}"  style="font-size: 32px">
 <span th:text="${item}"></span>

<div th:each="field : ${item}">
  <span th:text="${field.key}"></span> :
</div>
ce
</div>

-->


</body>
<script th:inline="javascript">

    // function change_part() {
    //     document.getElementById("part_1").classList.toggle("hidden")
    //     document.getElementById("part_2").classList.toggle("hidden")
    // }

    let typeeee = localStorage.getItem("type");


    console.log("  tb_sql_test_dto__.sql    :  ")
    var tb_sql_test_dto__ = [[${tb_sql_test_dto}]];
    console.log(tb_sql_test_dto__.sql);
    let test_sql__ = tb_sql_test_dto__.sql;
    test_sql__ = test_sql__.toLowerCase();
    let arr = test_sql__.split("create table")
    // drop table if
    let tables = arr[0].replace(/exists/g, " ").replace(/if/g, " ").replace(/table/g, " ").replace(/drop/g, " ").replace(/;/g, " ").replace(/\n/g, "---")
    // tables = tables.split(" ")
    // tables = new Set(tables);
    console.log(tables);
    document.getElementById("all_tables").innerText = tables;

    test_sql__ = test_sql__.toLowerCase();
    test_sql__ = test_sql__.replace(/;/g, " ").replace(/\(/g, " ").replace(/\)/g, " ").replace(/`/g, " ").replace(/'/g, " ").replace(/,/g, " ").replace(/-/g, " ");
    console.log(test_sql__);
    let mySet = new Set();
    for (let word of test_sql__.split(" ")) {
        word = word.trim() // 去掉换行符
        mySet.add(word)
    }
    mySet.add("order by ")
    mySet.add("group by ")
    mySet.add("right join ")
    mySet.add("left join ")
    mySet.add("is null ")
    mySet.add("length()")
    mySet.add("concat()")
    for (let word of mySet) {    // console.log(word)
    }

    console.log("sql__  :  ")
    var sql__ = [[${sql}]];
    console.log(sql__);

    console.log("SQLSyntaxErrorException SQL异常信息  :  ")
    var SQLSyntaxErrorException__ = [[${SQLSyntaxErrorException}]];
    console.log(SQLSyntaxErrorException__);

    console.log("results__   :  ")
    var results__ = [[${results}]];
    console.log(results__);

    console.log("column__   :  ")
    var column__ = [[${column}]];
    console.log(column__);

    console.log("result_null__   :  ")
    var result_null__ = [[${result_null}]];
    console.log(result_null__);

    var editor = ace.edit("editor"); //实例化ace
    editor.setTheme("ace/theme/monokai"); //这里是设置代码编辑器的主题，听说ace包含24个主题呢
    // editor.session.setMode("ace/mode/javascript");//这里是设置代码编辑器按哪种语言显示代码高亮，听说ace支持45种语言呢
    editor.session.setMode("ace/mode/sql");

    //启用提示菜单

    ace.require("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/language_tools");

    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        fontSize: 30,
    });

    // var editor = ace.edit("editor");
    // editor.setTheme("ace/theme/twilight");  设置主题
    // 设置值:  editor.setValue("the new text here"); // 或 session.setValue
    // 获取值:  editor.getValue(); // 或 session.getValue

    console.log("editer_sql : ")
    if (localStorage.getItem("editer_sql") == null) {
        localStorage.setItem("editer_sql", "")
    }
    editor.setValue(localStorage.getItem("editer_sql"));

    // 自定义补全
    var languageTools = ace.require("ace/ext/language_tools");

    var automatic_completion_word_list = [];
    let bbb = new Object();
    bbb.value = "bbb";
    automatic_completion_word_list.push(bbb);

    for (let word of mySet) {
        // console.log(word)
        let my_oj = new Object();
        my_oj.value = word;
        automatic_completion_word_list.push(my_oj)
    }

    console.log(automatic_completion_word_list);

    languageTools.addCompleter({
        getCompletions: function (editor, session, pos, prefix, callback) {
            callback(null, automatic_completion_word_list);
        }
    });

    // 返回 5L2g5aW9 base64编码
    function get_base64_code(text) {
        return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
    }


    //  按下 Ctrl + enter 触发事件
    let id = document.getElementById("id").innerText
    document.addEventListener("keydown", function (event) {
        if (event.ctrlKey && event.key === "Enter") {
            // 在这里执行您想要的操作
            console.log("CTRL + Enter 被按下");
            let input_sql = editor.getValue();
            localStorage.setItem("editer_sql", input_sql)
            input_sql = input_sql.replace(/\n/g, " ").replace(/\r\n/g, " ");  // 去掉换行符
            console.log(input_sql);
            let base64_sql = btoa(input_sql);  // base64 编码
            console.log(base64_sql); // "SGVsbG8sIFdvcmxkIQ=="
            // return false;
            window.location.href = "/id/test?sql=" + base64_sql + "&id=" + id;        // 跳转到本网页  id;
        }
    });


    function drop_and_creat_database(test__sql) {
        let url = "/id/drop_and_creat_database";
        let method = 'POST';
        // let method='GET';
        let postObj = {
            id: null,
            sql: test__sql
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (xhr.responseText === 'success') {
                    alert("success");
                    location.reload();
                }
            }
        }
    }

    drop_and_creat_database(tb_sql_test_dto__.sql)


</script>
</html>